<template>
  <div class="container">   
    <div class="handle-box">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple">
          <el-button @click="deleteAll">批量删除</el-button>
        </div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light">
          <el-input v-model="searchWord" placeholder="筛选关键词"></el-input>
        </div></el-col>       
      </el-row>
    </div>
    <!-- 购物车商品 -->
    <el-table border size="small" :data="data" @selection-change="handleSelectionChange">
        <!-- 复选框 -->
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column label="编号" prop="id" width="50" align="center"></el-table-column>
        <el-table-column label="SongId" prop="songId" width="50" align="center" v-if="false"></el-table-column>
        <el-table-column label="歌单图片" width="110" align="center" v-if="false" >
          <template v-slot="scope">
            <img :src="scope.row.image" style="width: 120px"/>
          </template>                         
        </el-table-column>
        <el-table-column prop="songName" label="歌曲名" />                      
        <el-table-column label="单价" width="180" align="center">
          <template v-slot="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>                       
        <el-table-column label="操作" width="160" align="center">
          <template v-slot="scope">                            
            <el-button type="danger" @click="deleteRow(scope.row.songId)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">
        <el-button @click="cartToPay()" type="danger">支  付</el-button>
      </div></el-col>    
    </el-row>
    <!-- <div style="margin: 20px;">
       
    </div>  -->
    <el-pagination
    class="pagination"
    background
    layout="total, prev, pager, next"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
    <!-- 删除提示框 -->
    <yin-del-dialog :delVisible="delVisible" @confirm="confirm" @cancelRow="delVisible = $event"></yin-del-dialog>
</template>

<script lang="ts">
import {computed, defineComponent, getCurrentInstance, ref, watch} from "vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";
import YinDelDialog from "@/components/dialog/YinDelDialog.vue";

export default defineComponent({
  components: {
    YinDelDialog,
  },
  setup(){
    const {proxy} = getCurrentInstance();
    const store = useStore();
   
    // let activeName = 'first';
    const tableData = ref([]); // 记录购物车项，用于显示
    const tempDate = ref([]); // 记录购物车项，用于搜索时能临时记录一份购物车项列表
    const pageSize = ref(10); // 页数
    const currentPage = ref(1); // 当前页

     // 计算当前表格中的数据
     const data = computed(() => {
      return tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
    });

    let userId = store.getters.userId;
 
    const searchWord = ref(""); // 记录输入框输入的内容
    watch(searchWord, () => {
      if (searchWord.value === "") {
        tableData.value = tempDate.value;
      } else {
        tableData.value = [];
        for (let item of tempDate.value) {
          debugger
          if (item.songName.includes(searchWord.value)) {
            tableData.value.push(item);
          }
        }
      }
    });
    
    getData();

    // 获取购物车项信息
    async function getData() {
      tableData.value = [];
      tempDate.value = [];
      const result = (await HttpManager.getCartList(userId)) as ResponseBody;
      tableData.value = result.data;
      tempDate.value = result.data;    
      currentPage.value = 1;
    }

    // 获取当前页
    function handleCurrentChange(val) {
      currentPage.value = val;
    }

    function handleSelectionChange(val) {     
      multipleSelection.value = val;
      multipleToPay.value =val; 
    }

    /**
     * 删除
     */
     const delSongIds = ref([]);// 记录当前要删除的行
    const multipleSelection = ref([]); // 记录当前要删除的列表
    const multipleToPay = ref([]); // 记录当前要支付的列表
    const delVisible = ref(false); // 显示删除框

    async function confirm() {
      const result = await HttpManager.deleteCartList(userId,delSongIds.value) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
      delVisible.value = false;
    }

    function deleteRow(id) {
      delSongIds.value.push(id);
      delVisible.value = true;
    }

    //批量删除
    function deleteAll() {
      for (let item of multipleSelection.value) {
        delSongIds.value.push(item.songId)
      }
      delVisible.value = true;
      multipleSelection.value = [];
    }

    // 获取购物车结算
    async function cartToPay() {
      //组装songIds
      let songIds = [];
      for (let item of multipleToPay.value) {
        songIds.push(item.songId)
      } 
      if(!songIds.length){
        (proxy as any).$message({
         message: "请选择要支付的歌曲",
         type: "warning",
        });
        return;
      }
      const result =  (await HttpManager.toPay(songIds,userId,2)) as ResponseBody; 
      if (result.success) {
        const divForm = document.getElementsByTagName('div');
        if(divForm.length){
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement('div');
        div.innerHTML = result.data;
        document.body.appendChild(div);

        document.forms[0].setAttribute('target','_self');//_blank新开窗口跳转  
        document.forms[0].submit();
      }else{
        (proxy as any).$message({
         message: result.message,
         type: result.type,
        });
      }

      multipleToPay.value = [];
    }

    return {
      searchWord, 
      data,
      userId,
      currentPage,
      pageSize,
      tableData,
      delVisible,
      deleteAll,
      cartToPay,
      confirm,
      deleteRow,
      handleCurrentChange,
      handleSelectionChange
    };
  }

});

</script>



<style lang="scss" scoped>

</style>
